<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>ele实时编辑器</title>
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

	<meta http-equiv="Expires" content="0">
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Cache-control" content="no-cache">
	<meta http-equiv="Cache" content="no-cache">

	<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />

	<script src="jquery.min.js"></script>


	<link rel="stylesheet" href="./element/element.css">

	<link rel="stylesheet" href="./css3d/test.css">

	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript" src="./element/element.js"></script>
	<script type="text/javascript" src="request.js"></script>
	<script type="text/javascript" src="/css3d/test.js"></script>
	<script type="text/javascript" src="/css3d/move.js"></script>

	<!-- import CSS -->

	<!-- import JavaScript -->
	<!-- <script src="https://unpkg.com/mint-ui/lib/index.js"></script> -->
	<!-- <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> -->



</head>

<body>

	<div id="map" class="content">
		<div id="dd">
			ddddd
		</div>


		<div id="tank" class="tank" @click="select_tank">
			<div class="a1"></div>
			<div class="a2"></div>
			<div class="a3"></div>
		</div>

		<div @click="locate_here(item,index)" v-for="(item,index) in map_unit_list" class="map-unit"
			:class="index == cur_index?'selected':''">
			{{index+1}}
		</div>


		<el-button @click="attack">attack</el-button>
	</div>


</body>

<script type="text/javascript" src='/css3d/move.js'></script>

</html>
<script>

	monitoring = new Vue({
		el: "#map",
		data() {
			return {
				map_unit_list: [],
				cur_index: '',
				cur_tank_location_index: 0,


				index_list: [{
					title: '今日开工',
					value: 20,
				}, {
					title: '今日在建',
					value: 15,
				}, {
					title: '今日完工',
					value: 5,
				}, {
					title: '待开工',
					value: 5,
				}, {
					title: '待验收',
					value: 2,
				}, {
					title: '停工',
					value: 1,
				}],
				project_list: [{
					title: '海德公园',
					status: '视频监控中'
				}, {
					title: '海尚壹品',
					status: '信号中断'
				}, {
					title: '中海国际',
					status: '正在重连中'
				}, {
					title: '金色万科',
					status: '视频监控中'
				}],
				manager_list: [{
					name: '张三',
					num: 2,
				}, {
					name: '李四',
					num: 4,
				}, {
					name: '王五',
					num: 1,
				}, {
					name: '赵四',
					num: 3,
				}],
				housekeeper_list: [{
					name: '雷军',
					num: 7,
				}, {
					name: '马云',
					num: 1,
				}, {
					name: '张一鸣',
					num: 5,
				}, {
					name: '马化腾',
					num: 3,
				}],
				video_list: [{
					title: '海德公园',

				}, {
					title: '金色万科',
				}],
				//cur_time:(new Date()).toLocaleString()
			};
		},

		computed: {
			cur_time() {
				var d = new Date();
				return (d.getMonth() + 1) + '月' + d.getDate() + '日  ' + d.getHours() + ':' + d.getMinutes();
			}
		},
		mounted: function () {
			this.init();
			this.$nextTick(function () {

			})
		},

		methods: {
			init() {
				var that = this;
				let center = [15, 15];

				for (i = 0; i < 100; i++) {
					let x_offset = 0;
					let z_offset = 0;

					x_offset = 30 * (i % 10);
					z_offset = 30 * parseInt((i) / 10);


					that.map_unit_list.push({
						index: i + 1,
						x: x_offset,
						y: z_offset,
					})
				}
			},
			locate_here(item, index) {
				debugger;

				this.cur_index = index;
				this.render_path(this.cur_tank_location_index, index, item);


			},
			render_path(start_index, end_index, item) {
				debugger;

				let x_offset = end_index % 10;
				let y_offset = parseInt(end_index / 10);

				if (x_offset > y_offset) {


					let offsetX = item.x + 'px';
					let offsetY = item.y + 'px';
					let offsetYX = (item.x - item.y) + 'px';

					move('#tank')
						.set('transform', 'translate3d(' + offsetYX + ',0px,30px)')
						.duration('1s')
						.end();

					setTimeout(function () {
						move('#tank')
							.set('transform', 'translate3d(' + offsetYX + ',0,30px) rotate(45deg)')
							.duration('1s')
							.end();
					}, 1000);

					setTimeout(function () {
						move('#tank')
							.set('transform', 'translate3d(' + offsetX + ',' + offsetY + ',30px) rotate(45deg)')
							.duration('1s')
							.end();

					}, 2000);



					// setTimeout(function (){
					// 	move('#tank')
					//   .set('transform', 'translate3d('+offsetX+','+offsetY+',30px) rotate(0deg)')
					//   .duration('1s')
					//   .end();
					// }, 3000);


					//   move('#tank')
					//   .set('transform', 'translate3d('+ex+',0,30px) rotate(45deg)')
					//   .duration('1s')
					//   .end();


					// 						move('#tank')
					//   .set('transform', 'translateX('+ex+')px)')
					//   .duration('1s')
					//   .set('transform', 'rotate(45deg)')
					//   .duration('1s')
					//   .set('transform', 'translate3d('+offset+',0,'+offset+'))')
					//   .duration('1s')
					//   .end();
				}
				else {

				}


			},
			select_tank(e) {
				debugger;

			},
			attack() {
				// $('#tank').css({
				// 	transform:'translateZ(30px) rotate(45deg)'
				// });

				move('#tank')
					.set('transform', 'translateZ(30px) rotate(45deg)')
					.duration('1s')
					.end();


				// 				var el = document.getElementById("tank");
				// dynamics.animate(el, {
				// 	translateZ: 30,
				// 	rotateZ:45,
				//   scale: 2,
				//   opacity: 0.5
				// }, {
				//   type: dynamics.spring,
				//   frequency: 200,
				//   friction: 200,
				//   duration: 1500
				// })

			},
			toggel_section(item) {
				this.cur_section = item.name;
				this.setting_list = this.setting_data[item.name];

				this.$nextTick(function () {

				})

			},
			add_code(item) {
				this.code += $.trim($("#" + item.id).html().replace(/\#/, this.handler_value_name)) + "\n";

				this.$nextTick(function () {

				})

			},
			toggel_hot_use(item) {
				debugger;

				this.hot_use_list = item.hot.split(",");

			},
			assign_value(item) {
				this.handler_value_name = item;


			},
		}
	});




</script>